<template>
    <div id="app">
        <div>
            <h1>类型</h1>
            <span @click="status = !status">新增</span>
            <ul v-show="status">
                <li v-for="(item,index) in list" :key="item.id" @click="add(item.id)">{{item.type}}</li>
            </ul>
        </div>

        <table>
            <tr>
                <th>类型</th>
                <th>账号</th>
                <th>提示内容</th>
                <th>操作</th>
            </tr>
            <el-tr v-for="tItem in addList" :key="tItem.id"
                :tItem = "tItem"
                @change="change"
                @del="del"
            ></el-tr>
        </table>
        <div class="right-icon">
            <icon-item v-for="item in addList" :key="item.id"
                :tip="item.tip"
                :icon="item.icon"
                :bgColor="item.bgColor"
            ></icon-item>
        </div>
    </div>
</template>

<script>
import elTr from '@/el-tr'
import iconItem from '@/icon-item'
export default {
   components:{
       elTr,
       iconItem
   },
   data(){
       return {
           list:[],
           addList:[],
           status:false
       }
   },
   created(){
       this.$http.get('/api/data').then((res) =>{
           if(res.data.code === 1){
               this.list = res.data.data;
           }
       }).catch((error) => {
           console.warn(error);
       })
   },
   methods:{
       add(id){
           this.addList.push(this.list.find(item => item.id === id))
       },
       change(tip,id){
           let ind = this.addList.findIndex(item => item.id === id);
           this.addList[ind].tip = tip;
       },
       del(id){
           let ind = this.addList.findIndex(item => item.id === id);
           this.addList.splice(ind,1);
       }
   }
}
</script>

<style>
    @import './assets/font/iconfont';
    .right-icon{
        position: absolute;
        bottom:10px;
        right:20px;
    }
</style>


